<template>
    <div class="biaodan">
          <template>
            <el-table :data="locaorder" style="width: 100%" stripe border>
                <el-table-column prop="orderDetail" label="产品图片" width="130" align="center">
                    <template v-slot="scope">
                        <el-avatar shape="square" fit="scale-down" :size="80" :src="scope.row.orderDetail[0].imageUrl"></el-avatar>
                    </template>
                </el-table-column>
                <el-table-column prop="order_id" label="产品编号" width="250" align="center"></el-table-column>
                <el-table-column prop="orderDetail[0].productName" label="产品名称" width="100" align="center"></el-table-column>
                <el-table-column prop="orderDetail[0].quantity" label="数量" width="100" align="center"></el-table-column>
                <el-table-column prop="total_fee" label="总价格" width="100" align="center"></el-table-column>
                <el-table-column prop="create_time" label="创建时间" width="180" align="center"></el-table-column>
                <el-table-column prop="pay_status" label="支付状态" width="100" align="center">
                    <template v-slot='scope'>
                        {{scope.row.pay_status === 1 ? '已支付' : '未支付'}}
                    </template>
                </el-table-column>
                <el-table-column prop="order_status" label="订单状态" width="100" align="center">
                    <template v-slot='{row}'>
                        <span v-if="row.order_status === 0">未提交</span>
                        <span v-else-if="row.order_status === 1">提交成功</span>
                        <span v-else-if="row.order_status === 2">已经取消</span>
                        <span v-else-if="row.order_status === 3">无效订单</span>
                        <span v-else-if="row.order_status === 4">交易关闭</span>
                        <span v-else-if="row.order_status === 5">退货</span>

                    </template>
                </el-table-column>
                <el-table-column prop="" label="操作"  align="center">
                    <template v-slot="{ row }">
						<el-button type="primary"  v-hasPay="[row.pay_status, row.order_status]"
							icon="iconfont icon-chongzhi"> 去支付 </el-button>
						<el-button type="danger" icon="el-icon-delete"> 删除 </el-button>
					</template>
                </el-table-column>
            </el-table>
        </template>
    </div>
</template>

<script>
import * as api from '../../../../api/vipdd'
    export default {
    meta:{
        title:"order",
        name:'订单管理'

    },

    created(){
        this.getorder()
    },

    data(){
        return{
            // 接收订单详情
            locaorder:[]
        }
    },

    methods:{
        // 获取订单详情
        getorder(){
            api.getorder()
            .then((res)=>{
                console.log('获取订单',res);
                this.locaorder = res.data.data
            })
        },

       
    },
    directives: {
		hasPay: {
			inserted(el, binding) {
				// console.log(binding);
				//指令接收的是用户的支付状态
				//0未支付 显示去支付按钮
				//1已支付 禁用去支付按钮
				//接收到的参数是一个数组 [pay_status,order_status]
				let [pay_status, order_status] = binding.value;
				//先保存当前按钮的类名
				let className = el.className;
				//当pay_status不是0 的时候
				//order_status不是1的时候
				//禁用按钮
				//order_status 0未提交 1已提交  2已经取消 3无效订单 4.交易关闭 5退货
				if (pay_status !== 0 || order_status !== 1) {
					el.disabled = true; //禁用按钮
					el.className = className + " " + "is-disabled";
				}
			},
		},
	},
}

</script>

<style lang="less" scoped>
    .biaodan{
        margin-top: 20px;
    }
</style>


